<template>
  <div class="quotation-detail" v-loading="loading">
    <div v-if="quotation">
      <!-- 基本信息 -->
      <el-card class="detail-section">
        <template #header>
          <span>报价基本信息</span>
        </template>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="报价单号">{{ quotation.quotationNo }}</el-descriptions-item>
          <el-descriptions-item label="客户代码">{{ quotation.customerCode }}</el-descriptions-item>
          <el-descriptions-item label="客户名称">{{ quotation.customerName }}</el-descriptions-item>
          <el-descriptions-item label="业务员">{{ quotation.salesperson }}</el-descriptions-item>
          <el-descriptions-item label="合同编号">{{ quotation.contractNo || '-' }}</el-descriptions-item>
          <el-descriptions-item label="订单日期">{{ quotation.orderDate }}</el-descriptions-item>
          <el-descriptions-item label="是否含税">
            <el-tag :type="quotation.isTaxIncluded ? 'success' : 'info'" size="small">
              {{ quotation.isTaxIncluded ? '含税' : '不含税' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="付款方式">{{ quotation.paymentMethod }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusTagType(quotation.status)" size="small">
              {{ quotation.status }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="总金额" :span="1">
            <span style="color: #f56c6c; font-weight: bold;">¥{{ (quotation.totalAmount || 0).toFixed(2) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="含税总金额" :span="1">
            <span style="color: #f56c6c; font-weight: bold;">¥{{ (quotation.totalTaxAmount || 0).toFixed(2) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="创建人">{{ quotation.createdBy || '-' }}</el-descriptions-item>
          <el-descriptions-item label="创建时间" :span="2">{{ formatDate(quotation.createdAt) }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="3">{{ quotation.remark || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 物料明细 -->
      <el-card class="detail-section">
        <template #header>
          <span>物料明细信息</span>
        </template>
        
        <el-tabs v-model="activeTab" type="border-card">
          <!-- 基本信息 -->
          <el-tab-pane label="基本信息" name="basic">
            <el-table :data="quotation.items" border stripe>
              <el-table-column prop="itemNo" label="序号" width="60"/>
              <el-table-column prop="productName" label="产品名称" width="150" show-overflow-tooltip/>
              <el-table-column prop="materialCode" label="物料编码" width="120"/>
              <el-table-column prop="layers" label="层数" width="80"/>
              <el-table-column prop="thickness" label="板厚(mm)" width="100"/>
              <el-table-column prop="surfaceTreatment" label="表面处理" width="120"/>
              <el-table-column prop="solderMask" label="阻焊" width="100"/>
              <el-table-column prop="character" label="字符" width="80"/>
              <el-table-column prop="boardMaterial" label="板材" width="100"/>
              <el-table-column prop="deliverySize" label="交货尺寸(mm)" width="120" show-overflow-tooltip/>
              <el-table-column prop="panelization" label="拼版" width="100"/>
              <el-table-column prop="innerCopper" label="内铜" width="80"/>
              <el-table-column prop="outerCopper" label="外铜" width="80"/>
              <el-table-column prop="viaProcess" label="过孔工艺" width="120" show-overflow-tooltip/>
              <el-table-column prop="testing" label="测试" width="100"/>
              <el-table-column prop="quantity" label="数量" width="80" align="right"/>
              <el-table-column label="单价" width="100" align="right">
                <template #default="scope">
                  ¥{{ (scope.row.unitPrice || 0).toFixed(4) }}
                </template>
              </el-table-column>
              <el-table-column label="合计金额" width="120" align="right">
                <template #default="scope">
                  ¥{{ (scope.row.totalAmount || 0).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="deliveryDate" label="出货日期" width="110"/>
              <el-table-column prop="itemRemark" label="备注" width="150" show-overflow-tooltip/>
            </el-table>
          </el-tab-pane>

          <!-- 价格计算 -->
          <el-tab-pane label="价格计算" name="calculation">
            <el-table :data="quotation.items" border stripe>
              <el-table-column prop="itemNo" label="序号" width="60"/>
              <el-table-column prop="productName" label="产品名称" width="150" show-overflow-tooltip/>
              <el-table-column label="宽(mm)" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.calculation?.widthMm || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="长(mm)" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.calculation?.lengthMm || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="数量" width="80" align="right">
                <template #default="scope">
                  {{ scope.row.calculation?.quantity || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="订单面积(mm²)" width="130" align="right">
                <template #default="scope">
                  {{ scope.row.calculation?.orderAreaMm ? scope.row.calculation.orderAreaMm.toFixed(4) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="平米价(元)" width="110" align="right">
                <template #default="scope">
                  {{ scope.row.calculation?.pricePerSqm ? '¥' + scope.row.calculation.pricePerSqm.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="未税单价(元)" width="120" align="right">
                <template #default="scope">
                  {{ scope.row.calculation?.untaxUnitPrice ? '¥' + scope.row.calculation.untaxUnitPrice.toFixed(4) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="未税金额" width="110" align="right">
                <template #default="scope">
                  {{ scope.row.calculation?.untaxAmount ? '¥' + scope.row.calculation.untaxAmount.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="含税总金额" width="120" align="right">
                <template #default="scope">
                  {{ scope.row.calculation?.taxTotalAmount ? '¥' + scope.row.calculation.taxTotalAmount.toFixed(2) : '-' }}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <!-- 费用明细 -->
          <el-tab-pane label="费用明细" name="fees">
            <el-table :data="quotation.items" border stripe>
              <el-table-column prop="itemNo" label="序号" width="60"/>
              <el-table-column prop="productName" label="产品名称" width="150" show-overflow-tooltip/>
              <el-table-column label="样板费" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.sampleFee ? '¥' + scope.row.sampleFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="工程费" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.engineeringFee ? '¥' + scope.row.engineeringFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="加急费" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.urgentFee ? '¥' + scope.row.urgentFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="阻抗费" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.impedanceFee ? '¥' + scope.row.impedanceFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="测试架费" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.testingFee ? '¥' + scope.row.testingFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="运费" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.shippingFee ? '¥' + scope.row.shippingFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="税金" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.taxAmount ? '¥' + scope.row.taxAmount.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="其他费用" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.otherFee ? '¥' + scope.row.otherFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="费用小计" width="120" align="right">
                <template #default="scope">
                  ¥{{ calculateItemFeesTotal(scope.row).toFixed(2) }}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <!-- 成本明细 -->
          <el-tab-pane label="成本明细" name="costs">
            <el-table :data="quotation.items" border stripe>
              <el-table-column prop="itemNo" label="序号" width="60"/>
              <el-table-column prop="productName" label="产品名称" width="150" show-overflow-tooltip/>
              <el-table-column label="起步价" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.costs?.basePrice ? '¥' + scope.row.costs.basePrice.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="阻燃费" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.costs?.flameRetardantFee ? '¥' + scope.row.costs.flameRetardantFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="沉铜费" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.costs?.copperPlatingFee ? '¥' + scope.row.costs.copperPlatingFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="表面处理费" width="120" align="right">
                <template #default="scope">
                  {{ scope.row.costs?.surfaceTreatmentFee ? '¥' + scope.row.costs.surfaceTreatmentFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="工程费" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.costs?.engineeringFee ? '¥' + scope.row.costs.engineeringFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="运费" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.costs?.shippingFee ? '¥' + scope.row.costs.shippingFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="铜厚费" width="100" align="right">
                <template #default="scope">
                  {{ scope.row.costs?.copperThicknessFee ? '¥' + scope.row.costs.copperThicknessFee.toFixed(2) : '-' }}
                </template>
              </el-table-column>
              <el-table-column label="合计" width="120" align="right">
                <template #default="scope">
                  ¥{{ calculateTotalCost(scope.row.costs).toFixed(2) }}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>

    <!-- 底部操作按钮 -->
    <div class="footer-actions">
      <el-button @click="$emit('close')">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { quotationAPI } from '../utils/api'

export default {
  name: 'QuotationDetail',
  props: {
    quotationId: {
      type: Number,
      required: true
    }
  },
  emits: ['close'],
  setup(props) {
    const loading = ref(false)
    const quotation = ref(null)
    const activeTab = ref('basic')
    
    // 获取状态标签类型
    const getStatusTagType = (status) => {
      switch (status) {
        case '草稿': return 'info'
        case '已提交': return 'primary'
        case '已生成合同': return 'success'
        case '已审核': return 'success'
        case '已拒绝': return 'danger'
        default: return 'info'
      }
    }
    
    // 格式化日期
    const formatDate = (dateStr) => {
      if (!dateStr) return ''
      return new Date(dateStr).toLocaleString('zh-CN')
    }
    
    // 计算成本合计
    const calculateTotalCost = (costs) => {
      if (!costs) return 0
      return (costs.basePrice || 0) + 
             (costs.flameRetardantFee || 0) + 
             (costs.copperPlatingFee || 0) + 
             (costs.surfaceTreatmentFee || 0) + 
             (costs.engineeringFee || 0) + 
             (costs.shippingFee || 0) + 
             (costs.copperThicknessFee || 0) + 
             (costs.oversizeHoleFee || 0) + 
             (costs.impedanceFee || 0) + 
             (costs.halfHoleFee || 0) + 
             (costs.mergePanelFee || 0) + 
             (costs.resinPlugHoleFee || 0) + 
             (costs.goldFingerFee || 0)
    }
    
    // 计算物料项费用合计
    const calculateItemFeesTotal = (item) => {
      if (!item) return 0
      return (item.sampleFee || 0) + 
             (item.engineeringFee || 0) + 
             (item.urgentFee || 0) + 
             (item.impedanceFee || 0) + 
             (item.testingFee || 0) + 
             (item.shippingFee || 0) + 
             (item.taxAmount || 0) + 
             (item.otherFee || 0)
    }
    
    // 加载报价单详情
    const loadQuotationDetail = async () => {
      try {
        loading.value = true
        const response = await quotationAPI.getQuotationById(props.quotationId)
        if (response.code === 200) {
          quotation.value = response.data
        }
      } catch (error) {
        console.error('加载报价单详情失败:', error)
      } finally {
        loading.value = false
      }
    }
    
    onMounted(() => {
      loadQuotationDetail()
    })
    
    return {
      loading,
      quotation,
      activeTab,
      getStatusTagType,
      formatDate,
      calculateTotalCost,
      calculateItemFeesTotal
    }
  }
}
</script>

<style scoped>
.quotation-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section :deep(.el-card__header) {
  padding: 15px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.detail-section :deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
}

:deep(.el-tabs__content) {
  padding: 20px 0;
}

.footer-actions {
  text-align: center;
  padding: 20px 0 10px;
  border-top: 1px solid #e4e7ed;
  margin-top: 20px;
}

:deep(.el-table) {
  font-size: 12px;
}

:deep(.el-table .cell) {
  padding: 8px 5px;
}
</style> 